<template>
  <div class="app-container home">
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="top">
          <div class="label">
            <div class="line"></div>
            <div class="title">平台概况</div>
          </div>
          <div class="box">
            <router-link to="project">
              <div class="statistics one"> 
                <img src="@/assets/images/盒子.svg" alt="">
                <span>6</span>
                <span>项目</span>
              </div>
            </router-link>
            <router-link to="point">
              <div class="statistics two"> 
                <img src="@/assets/images/定位.svg" alt="">
                <span>131</span>
                <span>监测点</span>
              </div>
            </router-link>
            <router-link to="device">
              <div class="statistics three"> 
                <img src="@/assets/images/设备管理.svg" alt="">
                <span>650</span>
                <span>设备</span>
              </div>
            </router-link>
          </div>
        </div>
        <div class="menu-wrap">
          <div class="label">
            <div class="line"></div>
            <div class="title">常用功能</div>
          </div>
          <div class="content">
            <router-link :to="item.path" v-for="(item,index) in menuButtonList" :key="index">
              <div class="menuButton">{{ item.name }}</div>
            </router-link>
          </div>
        </div>
        <div class="bottom"> 
          <div class="left">
            <div class="label">
              <div class="line"></div>
              <div class="title">监测点统计</div>
            </div>
            <div class="chart_box" id="bottom1"></div>
          </div>
          <div class="right">
            <div class="label">
              <div class="line"></div>
              <div class="title">设备统计</div>
            </div>
            <div class="chart_box" id="bottom2"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="wrap">
          <div class="label">
              <div class="line"></div>
              <div class="title">常用服务</div>
          </div>
          <div class="ser-wrap">
            <div class="addMargin" :class="[{'avtive_menu': avtiveMenu == '设备数据监测大屏'}]" @click="choseProject('设备数据监测大屏')">设备数据监测大屏</div>
            <div class="addMargin" :class="[{'avtive_menu': avtiveMenu == '项目数据展示大屏'}]" @click="choseProject('项目数据展示大屏')">项目数据展示大屏</div>
            <div class="addMargin" :class="[{'avtive_menu': avtiveMenu == '综合数据监测大屏'}]" @click="choseProject('综合数据监测大屏')">综合数据监测大屏</div>
          </div>
          <div class="img-box">
            <img :src="imgUrl" alt="">
          </div>
        </div>
        <div class="center">
          <div class="label">
              <div class="line"></div>
              <div class="title">预警信息</div>
          </div>
          <div class="tableStatus">
            <vue-seamless-scroll :data="listData" :class-option="classOption" class="warp" >
              <div class="tableStatus_item" v-for="(item,index) in listData" :key="index">
                <div>{{ item.title }}</div>
                <div>{{ item.content }}</div>
                <div>{{ item.devnum }}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script> 
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "Index",
  components: { vueSeamlessScroll },
  data() {
    return {   
      menuButtonList: [
        {name: "设备状态统计", path: "deviceOnline"},
        {name: "设备", path: "device"},
        {name: "市州设备情况", path: "csDevice"},
        {name: "项目", path: "project"},
        {name: "预警结果", path: "result"},
        {name: "预警通知查询", path: "message"},
        {name: "雨量数据统计", path: "rain"},
        {name: "属性", path: "attribute"},
        {name: "产品", path: "product"},
        {name: "预警模型配置", path: "modelConfig"},
        {name: "监测点", path: "point"},
        {name: "监测数据统计", path: "deviceUploadAnalyze"},
      ],
      avtiveMenu: "设备数据监测大屏", 
      imgUrl: require("@/assets/images/devicePic.adb1257.png"),
      listData: [
        {title: "常德普适型地灾监测（1170）", content: "临澧县四新岗镇牯牛村桥头组滑坡", devnum: "预警设备数量：1"},
        {title: "常德普适型地灾监测（1170）", content: "石门县壶瓶山镇杨家坪村狮燕3组刘凡堂屋后崩塌", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "石门县罗坪乡寨垭村柳新齐屋后滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "石门县磨市镇四方台村一、五组姚家岭滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "临澧县佘市桥镇川岗村竹根组土里垭不稳定斜坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县夷望溪镇罗华久屋后滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县沙坪镇西溪村黄塔港组黄塔港滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "石门县所街乡麻纳口村二十四组风垭头滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "石门县雁池乡杨柳园村一组老峪滑坡", devnum: "预警设备数量：2"}, 
        {title: "常德普适型地灾监测（1170）", content: "澧县火连坡镇三元村1组墨岩老崩塌", devnum: "预警设备数量：2"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县桃花源镇印家铺朝阳村一组吕猛屋后滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "临澧县佘市桥镇川岗村竹根组土里垭不稳定斜坡", devnum: "预警设备数量：2"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县夷望溪镇罗华久屋后滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "鼎城区谢家铺镇白泥塘村6组郭大和屋后滑坡", devnum: "预警设备数量：2"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县沙坪镇西溪村黄塔港组黄塔港滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "石门县罗坪乡寨垭村柳新齐屋后滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "澧县火连坡镇三元村1组墨岩老崩塌", devnum: "预警设备数量：2"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县理公港镇杜坪村上坪组滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "临澧县停弦渡镇福船村1组华家屋场滑坡", devnum: "预警设备数量：1"}, 
        {title: "常德普适型地灾监测（1170）", content: "临澧县停弦渡镇福船村1组华家屋场滑坡", devnum: "预警设备数量：2"}, 
        {title: "常德普适型地灾监测（1170）", content: "桃源县夷望溪镇罗华久屋后滑坡", devnum: "预警设备数量：2"}, 
      ],
      classOption: {
        singleHeight: 113
      },
    };
  },
  mounted() {
    let data1 = {
      text: 131,
      subtext: "总监测点",
      legendData: ["河坝", "基坑", "塌陷", "崩塌", "滑坡", "泥石流", "不稳定斜坡", "房屋安全监测","风机不安全监测"],
      dataNum: [{ "name": "河坝", "value": 0 },{ "name": "基坑", "value": 0 },{ "name": "塌陷", "value": 0 },{ "name": "崩塌", "value": 14 }, { "name": "滑坡", "value": 102 }, { "name": "泥石流", "value": 3 }, { "name": "不稳定斜坡", "value": 12 }, { "name": "房屋安全监测", "value": 0 }, { "name": "风机安全监测", "value": 0 }]
    }
    let data2 = {
      text: 2095,
      subtext: "总设备",
      legendData: [],
      dataNum: [
        {name: "标准普适型设备",value: 600},
        {name: "普适型裂缝",value: 134},
        {name: "普适型-倾角",value: 398},
        {name: "普适型-振动",value: 16},
        {name: "普适型-雨量",value: 67},
        {name: "普适型-预警喇叭",value: 115},
        {name: "普适型-地表位移",value: 35},
        {name: "普适型-加速度",value: 364},
        {name: "普适型-土壤温度",value: 136},
        {name: "普适型-土壤含水率",value: 136},
        {name: "综合型-地表位移监测站",value: 21},
        {name: "综合型-地表裂缝监测站",value: 10},
        {name: "综合型-雨量监测站",value: 8},
        {name: "综合型-深部位移监测站",value: 3},
      ]
    }
    this.initPie(data1,"bottom1")
    this.initPie(data2,"bottom2")
  },
  methods: {
    choseProject(data){
      let _this = this;
      _this.avtiveMenu = data; 
      switch (data) {
        case "设备数据监测大屏":
          document.documentElement.style.setProperty('--borderColor', 'rgb(255, 157, 0)') 
          _this.imgUrl = require("@/assets/images/devicePic.adb1257.png");
          break;  
        case "项目数据展示大屏":
          document.documentElement.style.setProperty('--borderColor', 'rgb(147, 98, 255)')  
          _this.imgUrl = require("@/assets/images/screenPic.62af200.png");
          break;  
        case "综合数据监测大屏":
          document.documentElement.style.setProperty('--borderColor', 'rgb(255, 109, 74)"') 
          _this.imgUrl = require("@/assets/images/homeScreen.338def5.png"); 
          break;  
      }
    },
    initPie(data,id){ 
      let _this = this;
      var chartDom = document.getElementById(id);
      var chart = _this.$echarts.init(chartDom);
      chart.clear();
      chart.resize(); 
      var option = { 
        "animation": true, 
        "title": {
            "text": data.text,
            "subtext": data.subtext,
            "x": "center",
            "y": "29%",
            "textStyle": {
                "color": "#000",
                "fontSize": 30,
                "fontWeight": "normal",
                "align": "center",
                "width": "200px"
            },
            "subtextStyle": {
                "color": "#666",
                "fontSize": 14,
                "fontWeight": "normal",
                "align": "center"
            }
        },
        "tooltip": {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)",
          backgroundColor: "rgba(0,0,0,0.5)",
          borderColor: "rgba(0,0,0,0)",
          textStyle: {
            color: "#fff" //设置文字颜色
          },
        },
        "legend": { 
            "left": "center",
            "textStyle": {
                "color": "#000",
                "fontSize": 14
            },
            "icon": "circle",
            "right": "0",
            "bottom": "0", 
            "data": data.legendData
        },
        "series": [{
            "type": "pie",
            "center": ["50%", "40%"],
            "radius": ["54%", "72%"],
            "color": ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A","#626c91","#96dee8","#a0a7e6","#20df59","#e33656","#f7a847","#ff6e87"],
            "startAngle": 135,
            "labelLine": {
                "normal": {
                    "length": 25
                }
            },
            "label": {
                show: false
            }, 
            "data": data.dataNum
        }, {
            "type": "pie",
            "center": ["50%", "40%"],
            "radius": ["44%", "46%"],
            "label": {
                "show": false
            },
            "data": [{
                "value": 78,
                "name": "实例1",
                "itemStyle": {
                    "normal": {
                        "color": {
                            "x": 0, "y": 0, "x2": 1, "y2": 0, "type": "linear", "global": false,
                            "colorStops": [
                              { "offset": 0, "color": "#9F17FF" }, 
                              { "offset": 0.2, "color": "#01A4F7" }, 
                              { "offset": 0.5, "color": "#FE2C8A" }, 
                              { "offset": 0.8, "color": "#FEE449" }, 
                              { "offset": 1, "color": "#00FFA8" }
                            ]
                        }
                    }
                }
            }]
        }]
      }
      chart.setOption(option);
    },
  }
};
</script>

<style scoped lang="scss">
.center{
  // height: 40vh;
  background-color: #fff;
  .tableStatus{ 
    height: 249px;
    overflow: hidden;
    margin: 16px auto;
    width: 90%;   
    .tableStatus_item>div:nth-child(3){
      font-size: 14px;
      color: rgba(31, 45, 61, 0.5);
      margin-top: 12px;
    }
    .tableStatus_item>div:nth-child(2){
      color: rgb(71, 86, 105);
      margin-top: 12px;
    }
    .tableStatus_item>div:nth-child(1){
      font-weight: bold;
    }
    .tableStatus_item{
      padding: 4px;
      margin-top: 20px; 
      color: #606266;
      
    }
  }
}
.img-box{
  padding: 0 30px 25px;
  height: 450px;
  img{
    width: 100%;
    height: 100%;
  }
}
.wrap{
  margin-bottom: 20px;
  background-color: #fff;
  .ser-wrap{
    padding: 20px 30px;
    display: flex;
    .avtive_menu{
      border-color: var(--borderColor) !important;
    }
    .addMargin{
      width: 10vw;
      cursor: pointer;
      font-size: 1vw;
      height: 47px;
      line-height: 47px;
      text-align: center;
      border-radius: 0;
      border-bottom: 3px solid transparent;
      margin-right: 30px; 
    }
    .addMargin:nth-child(1){ 
      color: rgb(255, 157, 0);
      background-color: rgba(255, 157, 0, 0.2);
    }
    .addMargin:nth-child(2){ 
      color: rgb(147, 98, 255);
      background-color: rgba(147, 98, 255, 0.2);
    }
    .addMargin:nth-child(3){ 
      color: rgb(255, 109, 74);
      background-color: rgba(255, 109, 74, 0.2);
    }
  }
}
.left,.right{
  width: calc(50% - 10px); 
  background-color: #fff;
  .chart_box{
    height: 28vh;
  }
}
.bottom{
  display: flex;
  justify-content: space-between;
}
.menu-wrap{
  min-height: calc(50vh - 135px);
  .content{
    padding: 20px; 
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    background-color: #fff; 
    margin-bottom: 20px;
    a{
      width: 31%;
    }
  }
  .menuButton{
    padding: 0.5vw 0.4vw 0.5vw 42px;
    text-align: left;
    border-radius: 0;
    margin: 0 0 1.1vw 0.5vw;
    font-size: .9vw;
    color: #185eff;  
    background-color:  rgba(24,94,255,.2);
    background-image: url(~@/assets/images/useList.png); 
    background-repeat: no-repeat;
    background-size: 30px;
    line-height: 30px;
    background-position: 6px center;
  }
}
.three{ 
  background: linear-gradient(180deg,rgba(51,137,255,.5),#3389ff);
}
.two{
  background: linear-gradient(180deg,#48dffe,#51a6fc);
}
.one{
  background: linear-gradient(180deg,#fbaa97,#ff6d4a);
}
.statistics{
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  position: relative;
  height: 6em;
  padding: 0.8vw;
  img{
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
  }
  span{
    color: #fff; 
    position: absolute;
    right: 10px;
  }
  span:nth-of-type(1){
    font-size: 32px;
    font-weight: bold; 
  }
  span:nth-of-type(2){
    font-size: 14px;  
    bottom: 0.8vh;
  }
}
.box{
  display: flex;
  justify-content: space-between;
  padding: 20px 30px;
  background-color: #fff;
  margin-bottom: 20px;
  a{
    width: 30%;
  }
}
.title{
  margin: 2px 10px;
  font-size: 18px;
  color: #323c47;
}
.line{
  width: 4px;
  height: 24px; 
  background: linear-gradient(180deg,#51a6fc,#6678ff);
  border-radius: 5px;
}
.label{
  padding: 15px;
  border-bottom: 1px solid #e9eff4;
  display: flex; 
  background-color: #fff;
}
.home{
  padding: 14px 25px;
  background-color: #f6f7fb;  
  height: calc(100vh - 84px);
  overflow-y: scroll;
}
</style>

